<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
        }
    </style>
</head>

<body>

</body>
<script type="importmap">
    {
      "imports": {
        "three": "./node_modules/three/build/three.module.js",
        "three/addons/": "./node_modules/three/examples/jsm/"
      }
    }
  </script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import Stats from 'three/addons/libs/stats.module.js';

// 创建Stats实例对象
const stats=new Stats();
// 设置模式, 0表示渲染帧率(一秒钟渲染多少次), 1表示渲染周期(渲染一帧需要的时间)
stats.setMode(0);
// stats实例对象挂载到浏览器中
document.body.appendChild(stats.domElement);

// 创建场景
const scene = new THREE.Scene();

// 创建相机: 透视相机
// new THREE.PerspectiveCamera( 视野角度,宽度 / 高度, 近截面, 远截面 );
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 2000 );
// 设置相机的位置
camera.position.set(200,200,200);
// 设置相机的观察位置
camera.lookAt(0,0,0);


// 创建立方体: 长宽高
const geometry = new THREE.BoxGeometry( 200, 200, 200 );
// 创建网格基础材料:
//  MeshBasicMaterial基础网格材质, 不受光照影响
//  MeshLambertMaterial: 漫反射网格材料, 会受到光照影响
const material = new THREE.MeshLambertMaterial( { color: 0x0000ff,transparent:false,opacity:0.5 } );

// 根据立方体模型和网格材料创建立方体网格: 将材料覆盖在立方体上
const cube = new THREE.Mesh( geometry, material );
// 设置立方体的位置
cube.position.set(0,0,0);
// 将立方体添加到场景中
scene.add( cube );

// 创建三维坐标轴
const axesHelper=new THREE.AxesHelper(300);
// 将三维坐标轴添加到场景中
scene.add(axesHelper);



/* // 创建点光源
const pointLight=new THREE.PointLight(0xffffff,1);
// 设置光源位置
pointLight.position.set( 200, 200, 200 );
// 将光源添加到场景中
scene.add(pointLight); 

// 模拟点光源
const pointLightHelper=new THREE.PointLightHelper(pointLight,10);
// 将模拟点光源添加到场景值
scene.add(pointLightHelper);

*/


// 创建环境光: 无方向, 每个方位都可以照射到, 知识程度不一致
const ambientLight=new THREE.AmbientLight(0xffffff,0.2);
// 将环境光添加到场景中
scene.add(ambientLight);


 // 创建平行光
 const directionalLight=new THREE.DirectionalLight(0xffffff,0.5);
 // 设置平行光的位置
 directionalLight.position.set(220,100,120);
 // 设置照射目标: 如果没有设置, 默认找向坐标原点
 directionalLight.target=cube;
 // 将平行光添加到场景中
 scene.add(directionalLight);
 // 模拟平行光光源
 const directionalLightHelper=new THREE.DirectionalLightHelper(directionalLight,10,0xff0000);
 // 将模拟平行光源添加到场景中
 scene.add(directionalLightHelper);



// 创建渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染尺寸: 设置canvas画布的宽高
renderer.setSize( window.innerWidth, window.innerHeight );
// 执行一个渲染操作
renderer.render(scene,camera);

// 创建轨道控制器: 相机插件
const controls = new OrbitControls( camera, renderer.domElement );
// 设置轨道控制器的位置, 此设置会影响相机的位置
// constols.target.set(x,y,z);
// 更新轨道控制器
// constols.update();

controls.addEventListener('change',function(event){
    // 执行一个渲染操作
    renderer.render(scene,camera);
});


// 将渲染结果挂载到dom页面上
document.body.appendChild( renderer.domElement );

function rotate(){
    // 更新新能监视器
    stats.update();
    // 让立方体绕Y轴旋转
    cube.rotateY(0.01);
    renderer.render(scene,camera);
    requestAnimationFrame(rotate);
}

rotate();


</script>

</html>